Skip to main content

Events

Many components offer events to which you can react with JavaScript code. To do this, select a component in the work area and open Detail Panel. In Detail Panel, switch to the category Events. Here, you will see all the events that your selected component offers.

Topbar

If you want to attach a function to the event, click on the button next to the event property, and a popup window will open.

Event-Snippet-Editor​

In the Snippet Editor, you will find a Explorer on the left side. Here, all event functions assigned to this component are listed.

Topbar

New event functions are only listed in the Explorer after saving. On the right side, you can see the code area and a content header bar. In the header bar, you will find controls for undo and redo, as well as the option to call the event functions asynchronously.

Topbar

Below the content header bar, you will see the actual Snippet Editor where you can define the function body.

Topbar

Lastly, you can save your changes to the code file (1) or discard all changes (2). To apply your code changes, the project with the modified code files must be saved.

Event-Live-Cycle​

  • EventTrigger
  • EventFunction
  • Validate
  • Update component config
  • Emit SourceLinks

When an event is triggered, a JavaScript function can be defined to be called by the event. If the called function returns false, the default behavior is stopped. This allows, for example, validation to be executed before the new value is applied to the component configuration. Default validations and SourceLink events are also stopped.

Topbar

Arguments​

Each event provides the event function with 3 arguments:

  • apiObject
    A collection of useful functions.
  • component
    The runtime object for the current component configuration.
  • eventData
    Data provided during the event.

Runtime objects​

To retrieve the current values of the component, we provide a yeetRuntimeObject for simplified access. A RuntimeObject can be created using apiObject.ui.getObject().

  apiObject.ui.getObject(id: number, type: string, sourceConfigType?: string, sourceConfigId?: number)
  => yeetRuntimeObject

  • id
    Unique component id.

  • type
    Component type.

  • (optional)sourceConfigType
    If referencing a component that does not exist on the current active page, specify the component type of the main container (y-page/y-popup) here.

  • (optional)sourceConfigType
    If referencing a component that does not exist on the current active page, specify the id of the main container (y-page/y-popup) here.

    let myInput = apiObject.ui.getObject(1,"y-input", "y-page", 1);

Using the RuntimeObject, you can now read (get) or write (set) the desired property via the property path.

The property path always consists of 3 components:

  • Category
  • Group
  • PropertyName
let propertyValue = myInput.get("style", "content", "valueString");
myInput.set("style", "content", "valueString", "NewString");

The path always follows the property structure in the Detail Panel.

Another way to generate the property path is to use the editor's autocomplete function. Simply enter the component name in PascalCase and navigate through the property structure. Once you've selected your property, the path will be inserted into the editor.

Runtime-Object-Property​

If certain properties need to be read and set frequently, you can create a runtime object directly for a property. First, create a runtime object for your component.

let propertyValue = myInput.get("style", "content", "valueString");

Then, using the runtime object, create a RuntimeObjectProperty as follows:

property(category: string, group: string, name: string): yeetRuntimeObjectProperty
let inputValueStringProperty = myInput.property("style", "content", "valueString");

Now, you can easily access the property using get and set methods.

let value = inputValueStringProperty.get();

inputValueStringProperty.set("NewValue");